import Vue from 'vue'
// 样式重置 reset.css base.css
import 'normalize.css/normalize.css' // A modern alternative to CSS resets
// 用element-ui 需要导入
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
// 默认导入了英文的语言包
// import locale from 'element-ui/lib/locale/lang/en' // lang i18n

import '@/styles/index.scss' // global css

import App from './App'
import store from './store'
import router from './router'

import '@/icons' // icon
// 默认导入并执行-router的全局前置守卫
import '@/permission' // permission control

// 自定义指令
// import { imgerror, color } from '@/directives'
// Vue.directive('imgerror', imgerror)
// Vue.directive('color', color)
// 优化：因为这样导入自定义太麻烦了 可以全部导入然后遍历得到自定义指令
import * as directives from '@/directives'
import * as filters from '@/filters'
// 批量把过滤器注册到全局去，方便使用
Object.keys(filters).forEach(key => Vue.filter(key, filters[key]))
// 遍历得到的对象，批量进行自定义指令的注册
// for (const key in directives) {
//   console.log(key, directives[key])
//   Vue.directive(key, directives[key])
// }
// 把request这个实例对象挂载在原型对象身上，这样每个组件都可以访问到发送请求的方法了,现在登录页使用一下
import request from '@/utils/request'
// 注册一个通用的工具栏 -全局注册有两种方式1.都堆在main.js中，第二种：抽离成一个单独的.vue文件，然后全部导入
// 方式1
// import PageTools from '@/components/PageTools'
// Vue.component('PageTools', PageTools)
// 方式2
import Components from '@/components/index'
import Print from 'vue-print-nb'
Vue.use(Print)

Vue.use(Components)
// 遍历对象还可以使用Object.keys(obj) 得到的是一个数组，然后可以使用数组的方法
Object.keys(directives).forEach(item => {
  Vue.directive(item, directives[item])
})

Vue.prototype.$request = request

// set ElementUI lang to EN
// Vue.use(ElementUI, { locale })
// 如果想要中文版 element-ui，按如下方式声明
Vue.use(ElementUI)

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

// el:"#app" 和.$mount("#app")等价，一个是以前的，一个现在
// 都是用来指定渲染的盒子 #app
